<template>
	<view class="page_login">
		<!-- 头部logo -->
		<view class="head">
			<view class="head_bg">
				<view class="head_inner_bg">
					<image style="width: 55px;height: 65px;" class="head_logo" />
				</view>
			</view>
		</view>
		<u-form :model="form" :rules="rules" ref="uForm" class="u-form">
			<u-form-item label-width="120" label="手机号" prop="username">
				<u-input placeholder="请输入手机号" type="number" v-model="form.username" />
			</u-form-item>
			<u-form-item label-width="120" label="验证码" prop="code">
				<u-button slot="right" type="success" @click="getCodeHandler" size="mini">{{codeTips}}</u-button>
				<u-input v-model="form.code" />
			</u-form-item>
			<u-form-item label="项目" label-width="120">
				<u-input v-model="projectText" placeholder="请选择项目" :select-open="projectsShow"
					@click="projectsShow = true" type="select" />
				<u-select v-model="projectsShow" label-name="ProjectName" value-name="Id" :list="projects"
					@confirm="projectOk"></u-select>
			</u-form-item>
			<u-button @click="loginHandler" type="primary">登录</u-button>
		</u-form>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>
<script>
	import {
		projectBind,
		login
	} from '@/api/login.js'

	import {
		getCode
	} from '@/api/message.js'

	import {
		ACCESS_TOKEN,
		USER_INFO
	} from '@/common/consts.js'

	export default {
		data() {
			return {
				form: {
					username: '18796284691',
					code: '',
					projectid: '',
					logintype: '',
					usertype: 2
				},
				projectsShow: false,
				projectText: "",
				projects: [],
				codeTips: '',
				rules: {
					username: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			projectBind().then(data => {
				console.log(data)
				this.projects = data
			})
		},
		methods: {
			// 获取验证码
			getCodeHandler() {
				if (this.$refs.uCode.canGetCode) {
					if (this.$u.test.mobile(this.form.username)) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						const params = {
							phone: this.form.username
						}
						getCode(params).then(data => {
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						})
					} else {
						this.$u.toast('请输入正确的手机号码');
					}
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			projectOk(e) {
				console.log(e);
				this.projectText = e[0].label
				this.form.projectid = e[0].value

			},
			loginHandler() {
				login(this.form).then(data => {
					console.log(data)
					uni.setStorageSync(ACCESS_TOKEN, data.DLS_Token)
					uni.setStorageSync('user_info', data)
					uni.switchTab({
						url:'/pages/index/index'
					})
				})
			}
		}
	}
</script>
<style>
	page {
		height: auto;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	$logo-padding: 60px;
	$form-border-color: rgba(214, 214, 214, 1);
	$text-color: #B6B6B6;

	.page_login {
		padding: 10px;
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: $logo-padding;
		padding-bottom: $logo-padding;

		.head_bg {
			border: 1px solid #fbecf1;
			border-radius: 50px;
			width: 100px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;

			.head_inner_bg {
				border-radius: 40px;
				width: 80px;
				height: 80px;
				display: flex;
				background-color: #fc2c5d;
				align-items: flex-end;
				justify-content: center;
				overflow: hidden;
			}
		}
	}
</style>
